iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

利用30天學習JavaScript&Node.js系列 第 10

Day10- JavaScript的陣列操作(上)

  • 分享至 

  • xImage
  •  

今天來講講陣列的基本操作,javascript建立陣列的方法很簡單,只要使用[]就能建立空陣列:

let array = [];

這是建立陣列最快的辦法,也可以直接建立非空陣列。還有一種做法是利用建構式Array()來建立陣列,像是這樣:

let array2 = new Array();

用這種方式可以預先定義陣列的大小,只要在()裡面輸入大小就好:

let array2 = new Array(10);
console.log(array2)

https://ithelp.ithome.com.tw/upload/images/20220922/20138060u9LGxvmKGo.png

不過用第一種寫法會比較方便,所以之後都會用第一種寫法。

再來,我們可以向陣列中加入東西,這邊可以用到push()這個函式:

push()

push()專門用來加入資料到陣列中,它會將資料放到陣列的最後面:

let array = [1,2];
array.push(3);
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060h9jGUjPuHL.png

剛剛提到這個做法用來將資料放到陣列的最後面,當然也有放到最前面的,這個函式叫unshift()

unshift()

let array = [1,2];
array.unshift(3);
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060KWFtpVkpS2.png

能新增元素當然也能刪除元素,跟unshift()對應的函式就是shift(),用來移除陣列第一個元素:

shift()

shift()的用法後面不需要放入參數:

let array = [1,2];
array.shift();
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060HHm8S8pexE.png

跟新增元素一樣,也有刪除最後的元素的。跟push()對應的是pop()

pop()

pop()的用法後面也不需要放入參數:

let array = [1,2];
array.pop();
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/2013806007uIabe19D.png

javascript也提供排序的函式,使用sort()就能將陣列內的元素排序。

sort()

let array = [5,6,3,2,1,4];
array.sort();
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060bSNB3k7qIB.png

sort()可以在裡面放入函式來修改排列規則:

let array = [5,6,3,2,1,4];
array.sort((a,b) => b-a);
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060W8R3EXM4vx.png

這樣就能做到由大排到小了,解說起來有點複雜,詳細可以參考這篇Array.prototype.sort()

若要將陣列整個反轉的話,可以使用reverse()

reverse()

let array = [5,4,3,2,1];
array.reverse();
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060DHIfcvQ3rq.png

若要同時做到刪除陣列元素以及加入陣列元素的話,可以使用splice()來達成。

splice()

splice()可以填入三個(或更多)參數,第一個是起始位置,第二個是刪除的元素數量,最後一個參數(包含之後)可以填入要新增的參數:

let array = [1,2,3];
array.splice(1,1,4,5);
console.log(array);

https://ithelp.ithome.com.tw/upload/images/20220922/20138060HCsWI0JXId.png

像上面這個例子,就會從第二個位置(陣列起始位置是0),刪除一個值(2),並在當前位置新增4跟5這兩個值進去。總而言之,就是一個混了很多綜合功能的函式。

今天就先講到這裡,明天繼續吧剩下的一些實用功能講一講。


上一篇
Day9- JavaScript的例外處理
下一篇
Day11- JavaScript的陣列操作(下)
系列文
利用30天學習JavaScript&Node.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言